<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="mvc" uri="http://www.trkj.com/mvc/tags" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<link type="text/css" rel="stylesheet" href="css/lgoodslist.css"/>
<link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="bootstrap/css/bootstrap.min.css" />
<link rel="stylesheet" href="bootstrap/css/bootstrap-responsive.min.css" />
<script type="text/javascript" src="bootstrap/js/bootstrap.min.js" ></script>
<script type="text/javascript">
	$(function(){
		//单项放入回收站
		$(".goodslist_delete").click(function(){
			if(confirm("真的要删除吗？")){
				var a = $(this);
				$.get("goodslist?action=reviseIfdelete", {code: a.attr("id"),ifdelete: 0}, function(){
					a.parent().parent().remove();
				});
			}
		});
		//全选
		var num=0;
		$(".checkbox").click(function(){
			var all=$("input[name='checkbox']");
			if(num%2==0){
				for(var i=0;i<all.length;i++){
					all[i].checked=true;
				}
			}else{
				for(var i=0;i<all.length;i++){
					all[i].checked=false;
				}
			}
			num++;
		});
		//批量删除
		$(".delete").click(function(){
			var a=$("input[name='checkbox']:checked");
			if(a.length==0){
            	alert("至少选中一个");
            	return;
            } 
			//获取所有已选的id存到集合
			var list=[];
			$("input[name='checkbox']:checked").each(function(i, o){
				list.push($(o).attr("id"));
            });
            if(confirm("真的要删除吗？")){
    			//循环删除
    			for(var i=0;i<a.length;i++){
    				$.get("orders?action=reviseIfdelete", {code: list[i]},function(){
    				});
    			}
    			a.parent().parent().remove();
    		}
		});
		//点击检索显示检阅窗口
		$(".select").click(function(){
			$("#box").css("display","block");
		});
		//点击关闭检索窗口
		$(".close").click(function(){
			$("#box").css("display","none");
		});
	});
	var flag=false;
	var box;
	var offsetX,offsetY;
	function down(e){
		flag=true;
		box=document.getElementById("box");
		offsetX=e.x-parseInt(box.style.left);
		offsetY=e.y-parseInt(box.style.top);
	}
	function move(e){
		if(flag){
			box.style.left=(e.x-offsetX)+"px";
			box.style.top=(e.y-offsetY)+"px";
		}
	}
	function up(e){
		flag=false;
	}
</script>
<style type="text/css">
	#box{
		position: absolute;
		display:none;
		background: rgba(0,0,0,0.5);
		background-color:#DDDDDD;
		border-radius: 20px;
		padding: 20px;
		z-index: 3;		
	}
	#box a{
		text-decoration: none;
		color: black;
	}
	#box li{
		float: right;
		list-style: none;
		border:0;
		padding: 0;
		margin-left: 0;
	}
	#box li:hover{
		cursor: pointer;
	}
	#box-table{
		border-radius: 10px; 
		background-color: #FFFFFF;
		width: 350px;
		border-spacing: 10px;
	}
	#box-table button{
		width: 30px;
		height: 30px; 
		background-color: white;
		border-radius: 5px 0 0 5px;
		border: 1px #DDDDDD solid;
	}
	#box-table .text{
		width: 120px;
		height: 28px;
		border-radius:0 5px 5px 0;
		border:1px #DDDDDD solid;
	}
	#box-table select{
		border-color: #DDDDDD;
		border-radius:5px 0 0 5px;
		height: 30px;
		width: 152px;
	}
	.show-ul{
		position: absolute;
		width:50px;
		top:70px;
		left:210px;
		border: 1px gray solid;
		border-radius: 5px;
		background-color:#ffffff;
		padding:5px;
		margin:0;
	}
	.show-ul li{
		float: none;
		border: 0;
		border-radius: 0;
		margin-left: 0;
	}
	.show-ul li:hover{
		cursor: pointer;
		background-color: #DDDDDD;
	}
</style>
</head>
<body style="font-size: 20px;">
	<div class="top" style="padding: 20px 30px 10px; font-size: 16px;">
		<a href="#">订单</a>/
		<a href="#">订单管理</a>/
		<span>订单列表</span>
	</div>
	<div class="middle">
		<div class="span12" style="width: 96%;">
		<a href="lordersadd.jsp">
			<button>
				<i class="fa fa-plus"></i>
				<span>添加订单</span>
			</button>
		</a>
		<a href="javascript:;" class="checkbox">
			<button>
				<i class="fa fa-check"></i>
				<span>全选</span>
			</button>
		</a>
		<a href="javascript:;">
			<button class="delete">
				<i class="fa fa-gear"></i>
				<span>批量删除</span>
				<i class="fa fa-chevron-down"></i>
			</button>
		</a>
		<a href="goodslist?action=queryByPage&curpage=1&pagesize=4&ifdelete=0">
			<button>
				<i class="fa fa-trash"></i>
				<span>回收站</span>
			</button>
		</a>
		<a href="javascript:;">
			<button class="select">
				<i class="fa fa-search"></i>
				<span>检索</span>
			</button>
		</a>
		<div id="box" style="width: 350px; height: 320px; left: 200px; top: 100px;" onmousedown="down(event)" onmousemove="move(event)" onmouseup="up(event)">
			<a href="javascript:;">
				<span>订单检索</span>
				<li class="close"><i class="fa fa-close"></i></li>
			</a>
				<form action="orders?action=queryByPageG_code&curpage=1&pagesize=4" method="post">
					<table id="box-table">
    				<tr>
    					<td colspan="2">
    						<select name="select" style="width: 85px;">
    							<option vlaue="订单号">订单号</option>
    							<option vlaue="收件人姓名">收件人姓名</option>
    						</select><input class="text" name="text1" type="text" placeholder="输入查询信息" style="width: 235px;"/>
    					</td>
    				</tr>
    				<tr>
    					<td>
    						<select style="width: 152px; border-radius: 5px;">	
    							<option>选择支付状态</option>
    							<option>已支付</option>
    							<option>未支付</option>
    						</select>
    					</td>
    					<td>
    						<select style="width: 152px; border-radius: 5px;">
    							<option>选择发货状态</option>
    							<option>已发货</option>
    							<option>待发货</option>
    						</select>
    					</td>
    				</tr>
    				<tr>
    					<td>
    						<select style="width: 152px; border-radius: 5px;">
    							<option>选择商品标签</option>
    							<option>最新商品</option>
    							<option>特价商品</option>
    							<option>热卖商品</option>
    							<option>推荐商品</option>
    						</select>
    					</td>
    					<td>
    						<select style="width: 152px; border-radius: 5px;">
    							<option>选择商品品牌</option>
    							<option>最新商品</option>
    							<option>特价商品</option>
    							<option>热卖商品</option>
    							<option>推荐商品</option>
    						</select>
    					</td>
    				</tr>
    				<tr>
    					<td>
    						<button style="width: 152px; border-radius: 5px;">
    							<i class="fa fa-reorder"></i>
    							选择商品分类
    						</button>
    					</td>
    				</tr>
    				<tr>
    					<td>
    						<button><i class="fa fa-rmb"></i></button><input class="text" type="text" placeholder="价格下限"/>
    					</td>
    					<td>
    						<button><i class="fa fa-rmb"></i></button><input class="text" type="text" placeholder="价格上限"/>
    					</td>
    				</tr>
    				<tr>
    					<td>
    						<button><i class="fa fa-calendar"></i></button><input class="text" type="text" placeholder="创建起始时间"/>
    					</td>
    					<td>
    						<button><i class="fa fa-calendar"></i></button><input class="text" type="text" placeholder="创建结束时间"/>
    					</td>
    				</tr>
    				<tr>
    					<td colspan="2"><li><input class="box-table-button" type="submit" value="查询" style=""></li></td>
    				</tr>
    			</table>
				</form>
    			</div>
    	</div>
	</div>
	<div class="bottom">
		<div class="span12" style="width: 96%;">
			<table class="table">
			<thead>
				<tr>
					<th></th>
					<th>订单号</th>
					<th>收货人</th>
					<th>支付状态</th>
					<th>发货状态</th>
					<th>配送方式</th>
					<th>支付方式</th>
					<th>用户名</th>
					<th>下单时间</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody>
				<c:forEach items="${map.list }" var="u" varStatus="vs">
					<tr style="background-color:#${((param.curpage- 1)* param.pagesize+ vs.count)%2 eq 0?'':'cccccc'}">
						<td><input type="checkbox" name="checkbox" id="${u.o_code}"></td>
						<td>${(param.curpage - 1) * param.pagesize + vs.count}</td>
						<td>${u.r_name }</td>
						<td>${u.pay_state}</td>
						<td>${u.deliver_state}</td>
						<td>${u.ship_mode}</td>
						<td>${u.pay}</td>
						<td>${u.u_id}</td>
						<td>${u.buy_date}</td>
						<td><a href="lorders?action=querySelect&code=${u.o_code}"><i class="fa fa-eye"></i></a>
							<a id="${u.o_code}" class="lorders_delete" href="javascript:void(0);"><i class="fa fa-times"></i></a></td>
					</tr>
				</c:forEach>
			</tbody>
		</table>
		<div class="pager" style="float: left; margin-top: 0px;">
			<mvc:pager url="lorders?action=queryByPage" pagesize="${param.pagesize}" count="${map.count }" curpage="${param.curpage }" />
		</div>
	</div>
	</div>
</body>
</html>